<template>
  <div id="app">
    <el-container>
      <el-header class="appHeader">
        <el-row style="padding:0px 120px;">
          <el-col :span="8" class="leftHead">
            <el-row>
              <el-col :span="12">
                <el-button type="text" class="appLoginRegister" @click="headName()">{{helloHead}}</el-button>
              </el-col>
              <el-col :span="4" v-if="!isLogin">
                <router-link to="/login" class="appLoginRegister">请登录</router-link>
              </el-col>
              <el-col :span="5" v-if="!isLogin">
                <router-link to="/userRegister" class="appLoginRegister">注册</router-link>
              </el-col>
              <el-col :span="5" v-if="isLogin">
                <el-button type="text" class="appLoginRegister" @click="userInfo()">{{userName}}</el-button>
              </el-col>
              <el-col :span="5" v-if="isLogin">
                <el-button type="text" class="appLoginRegister" @click="userExit()">退出</el-button>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="16">
            <navbar :isAdmin="isAdmin"></navbar>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view style="padding:20px 140px 0px 140px;"></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import navbar from "./views/Navbar";
export default {
  name: "App",
  components: {
    navbar
  },
  data() {
    return {
      //clientHeight: null,
      dialogLogin: false,
      dialogRegist: false,
      username: "",
      password: "",
      helloHead: "Hi,欢迎来潮鞋购物网站",
      userName: ""
    };
  },
  methods: {
    userInfo() {
      //this.dialogLogin = true;
      if (localStorage.getItem("adminUser")) {
      
      }else{
        this.$router.push("/user/persion");
      }
    },
    userExit() {
      var that = this;
      localStorage.clear();
      that.$router.push("/");
      window.location.reload(true);
    },
    headName() {
      let that = this;
      if (localStorage.getItem("adminUser")) {
      
      }else{
       that.$router.push("/");
        window.location.reload(true);
      }
      
     
    },
  },
  computed: {
    isAdmin: function() {
      // 判断是否管理员页面
      if (this.$route.path.startsWith("/admin")) {
        if (localStorage.getItem("adminUser")) {
          this.helloHead = "潮鞋购物网站后台管理";
          if (this.$route.path == "/admin") {
            this.$router.push("/admin/userManagement");
          }
          return 0;
        } else {
          this.$router.push("/login");
        }
      } else if (
        (this.$route.path.startsWith("/") && this.$route.path.length == 1) ||
        this.$route.path.startsWith("/user")
      ) {
        if (localStorage.getItem("user")) {
          if (JSON.parse(localStorage.getItem("user")).userIsBussiness == 0) {
            return 1;
          } else {
            return 2;
          }
        } else {
          return 1;
        }
      } else {
        return null;
      }
    },
    isLogin: function() {
      if (localStorage.getItem("user")) {
        this.userName = JSON.parse(localStorage.getItem("user")).userUsername;
        return true;
      } else if (localStorage.getItem("adminUser")) {
        this.userName = JSON.parse(
          localStorage.getItem("adminUser")
        ).adminUsername;
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style>
#app,
html,
body,
.home,
.el-container {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgba(250, 250, 250, 0.4);
  margin: 0px;
  height: 100%;
}
.appHeader {
  background-color: #e6a23c;
}
.leftHead {
  font-size: 14px;
  color: #fffaf0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 61px;
}
.leftHead >>> .el-button--warning:hover {
  background-color: #e6a23c;
  border-color: #e6a23c;
}
.leftHead .appLoginRegister {
  color: #fffaf0;
  text-decoration: none;
}
.leftHead .appLoginRegister:hover {
  color: #ff0036;
}
.el-main {
  padding: 20px 0px;
}
.footer {
  background-color: #e6a23c;
  height: 60px;
  text-align: center;
  line-height: 60px;
  color: #fffaf0;
  padding: 0px;
}
.el-dialog__header {
  background-color: #e6a23c;
}
.el-dialog__title {
  color: #fffaf0;
}
.dialogLogin .namePassword {
  display: flex;
  flex-direction: row;
  font-size: 18px;
}
.dialogLogin .otherLogin {
  display: flex;
  flex-direction: row;
}
.dialogLogin .other {
  margin-right: 10px;
  color: #999;
}
</style>
